<template>
    <div class="logging">
        <div class="logging-title">
            日志记录
        </div>
        <div class="logging-content">
            <a-skeleton active :paragraph="{ rows: 10 }" :loading="loading">
                <a-timeline>
                    <a-timeline-item  v-for="(item, key) in data" :key="key">
                        <p class="logging-content-time">{{item.dateTime}}</p>
                        <p>{{item.content}}</p>
                    </a-timeline-item>
                </a-timeline>
            </a-skeleton>
        </div>
        <a-pagination v-model="current" size="small" :total="total" @change="init" show-less-items />
    </div>
</template>

<script>
    import {userLog} from "@/services/monitoring";

    export default {
        name: "logging",
        data() {
            return {
                loading: false,
                current: 1,
                total: 0,
                data: [],
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.loading = true;
                userLog({
                    page: this.current,
                    pageSize: 10
                }).then(({data}) => {
                    this.loading = false;
                    this.total = data.total;
                    this.data = data.list;
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .logging{
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 700px;
        &-content{
            flex: 1;
            overflow: auto;
            padding-top: 30px;
            &-time{
                color: rgba(0, 0, 0, 0.65)!important;
                font-size: 14px;
            }
            p{
                margin: 0;
                color: #000;
            }
        }
        .ant-pagination{
            text-align: right;
            margin: 15px 0;
        }
    }
    .logging-content::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    .logging-content::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
    }
    .logging-content::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 10px;
    }
    .logging-content:hover{
        &::-webkit-scrollbar-thumb {
            background-color: rgba(204,204,204,0.44);
        }
    }
</style>
